<template>
  <div class="list">
    <h3>选美大赛</h3>

    <button v-on:click="xuanmei(1)">美女-1</button>
    <button v-on:click="xuanmei(2)">美女-2</button>
    <button @click="xuanmei(3)">美女-3</button>
    <button @click="xuanmei(4)">美女-4</button>
    <button @click="xuanmei(5)">美女-5</button>

    <hr>
    <img src="../assets/01.jpg" alt="" v-show="num == 1">
    <img src="../assets/02.jpg" alt="" v-show="num == 2">
    <img src="../assets/03.jpg" alt="" v-show="num == 3"> 
    <img src="../assets/04.jpg" alt="" v-show="num == 4">
    <img src="../assets/05.jpg" alt="" v-show="num == 5">

  </div>
</template>

<script>
export default {
    data(){
        return {
            // 定义一个数据，用来记录当前显示哪张图片
            num:3
        }
    },
    methods:{
       //    
       xuanmei(x){
         console.log("你选择了几号?"+x)
         this.num = x; //点的是哪个按钮，就显示对应的图片
       }
    }
}
</script>

<style scoped>
.list button{
    margin: 10px 20px;
}
.list img{
    width: 780px;
}
</style>